<template>
 <div style="margin-top: 15px">
     <!-- 标题 -->
     <div class="operation-container">
       <!-- 数据筛选 -->
       <div style="margin-left:auto">
         <el-input
             v-model="keywords"
             prefix-icon="el-icon-search"
             size="small"
             placeholder="请输入模块名或描述"
             style="width:200px"
             @keyup.enter.native="searchLogs"
         />
         <el-button
             type="primary"
             size="small"
             icon="el-icon-search"
             style="margin-left:1rem"
             @click="searchLogs"
         >
           搜索
         </el-button>
         <el-button
             type="danger"
             size="small"
             icon="el-icon-delete"
             :disabled="this.logIdList.length == 0"
             @click="isDelete = true"
         >
           批量删除
         </el-button>
       </div>
     </div>
     <!-- 权限列表 -->
     <el-table
         @selection-change="selectionChange"
         v-loading="loading"
         :data="logList"
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column
           prop="optModule"
           label="系统模块"
           align="center"
           width="120"
       />
       <el-table-column
           width="100"
           prop="optType"
           label="操作类型"
           align="center"
       />
       <el-table-column
           prop="optDesc"
           label="操作描述"
           align="center"
           width="150"
       />
       <el-table-column
           prop="requetMethod"
           label="请求方式"
           align="center"
           width="100"
       >
         <template slot-scope="scope" v-if="scope.row.requestMethod">
           <el-tag :type="tagType(scope.row.requestMethod)">
             {{ scope.row.requestMethod }}
           </el-tag>
         </template>
       </el-table-column>
       <el-table-column prop="nickname" label="操作人员" align="center" />
       <el-table-column
           prop="ipAddress"
           label="登录ip"
           align="center"
           width="130"
       />
       <el-table-column
           prop="ipSource"
           label="登录地址"
           align="center"
           width="150"
       />
       <el-table-column
           prop="createTime"
           label="操作日期"
           align="center"
           width="190"
       >
         <template slot-scope="scope">
           <i class="el-icon-time" style="margin-right:5px" />
           {{ scope.row.createTime | dateTime }}
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="150">
         <template slot-scope="scope">
           <el-button
               size="mini"
               type="text"
               slot="reference"
               @click="check(scope.row)"
           >
             <i class="el-icon-view" /> 查看
           </el-button>
           <el-popconfirm
               title="确定删除吗？"
               style="margin-left:10px"
               @confirm="deleteLog(scope.row.id)"
           >
             <el-button size="mini" type="text" slot="reference">
               <i class="el-icon-delete" /> 删除
             </el-button>
           </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
     <el-pagination
         class="pagination-container"
         background
         @size-change="sizeChange"
         @current-change="currentChange"
         :current-page="current"
         :page-size="size"
         :total="count"
         :page-sizes="[10, 20]"
         layout="total, sizes, prev, pager, next, jumper"
     />
     <!-- 查看模态框 -->
     <el-dialog :visible.sync="isCheck" width="40%">
       <div class="dialog-title-container" slot="title">
         <i class="el-icon-more" />详细信息
       </div>

       <el-form ref="form" :model="optLog" label-width="100px" size="mini">
         <el-form-item label="操作模块：">
           {{ optLog.optModule }}
         </el-form-item>
         <el-form-item label="请求地址：">
           {{ optLog.optUrl }}
         </el-form-item>
         <el-form-item label="请求方式：">
           <el-tag :type="tagType(optLog.requestMethod)">
             {{ optLog.requestMethod }}
           </el-tag>
         </el-form-item>
         <el-form-item label="操作方法：">
           {{ optLog.optMethod }}
         </el-form-item>
         <el-form-item label="请求参数：">
           {{ optLog.requestParam }}
         </el-form-item>
         <el-form-item label="返回数据：">
           {{ optLog.responseData }}
         </el-form-item>
         <el-form-item label="操作人员：">
           {{ optLog.nickname }}
         </el-form-item>
       </el-form>
     </el-dialog>
     <!-- 批量删除对话框 -->
     <el-dialog :visible.sync="isDelete" width="30%">
       <div class="dialog-title-container" slot="title">
         <i class="el-icon-warning" style="color:#ff9900" />提示
       </div>
       <div style="font-size:1rem">是否删除选中项？</div>
       <div slot="footer">
         <el-button @click="isDelete = false">取 消</el-button>
         <el-button type="primary" @click="deleteLog(null)">
           确 定
         </el-button>
       </div>
     </el-dialog>

 </div>
</template>

<script>
export default {
  name:"SysLog",
  created() {
    this.listLogs();
  },
  data() {
    return {
      loading: true,
      logList: [],
      logIdList: [],
      keywords: null,
      current: 1,
      size: 10,
      count: 0,
      isCheck: false,
      isDelete: false,
      optLog: {}
    };
  },
  methods: {
    selectionChange(logList) {
      this.logIdList = [];
      logList.forEach(item => {
        this.logIdList.push(item.id);
      });
    },
    searchLogs() {
      this.current = 1;
      this.listLogs();
    },
    sizeChange(size) {
      this.size = size;
      this.listLogs();
    },
    currentChange(current) {
      this.current = current;
      this.listLogs();
    },
    listLogs() {
      this.axios
          .get("/api/log/admin/operation/logs", {
            params: {
              current: this.current,
              size: this.size,
              keywords: this.keywords
            }
          })
          .then((data) => {
            this.logList = data.obj.recordList;
            this.count = data.obj.count;
            this.loading = false;
          });
    },
    deleteLog(id) {
      var param = {};
      if (id != null) {
        param = { data: [id] };
      } else {
        param = { data: this.logIdList };
      }
      this.axios.delete("/api/log/admin/operation/logs", param).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: "成功",
            message: data.message
          });
          this.listLogs();
        } else {
          this.$notify.error({
            title: "失败",
            message: data.message
          });
        }
        this.isDelete = false;
      });
    },
    check(optLog) {
      this.optLog = JSON.parse(JSON.stringify(optLog));
      this.isCheck = true;
    }
  },
  computed: {
    tagType() {
      return function(type) {
        switch (type) {
          case "GET":
            return "";
          case "POST":
            return "success";
          case "PUT":
            return "warning";
          case "DELETE":
            return "danger";
        }
      };
    }
  }
};
</script>

<style scoped>
label {
  font-weight: bold !important;
}
</style>

